<script setup lang="ts">
import { ref } from 'vue';

const videoList = ref<any[]>([1])
const unlock = ref<any>(null)

const goPreview = () => {
    uni.navigateTo({ url: '/pages/video/preview' })
}

</script>

<template>
    <view class="page">
        <view class="content">
            <view class="kong" v-if="!videoList.length">
                <image class="kong-img" src=""/>
                <text class="kong-text">暂无视频</text>
            </view>
            <scroll-view scroll-y style="height: 100%;">
                <view @click="goPreview" class="item">
                    <video class="video" src=""></video>
                    <view class="video-mark">
                        <image class="video-mark-img" src=""/>
                        <text>123</text>
                    </view>
                </view>
                <view class="item">
                    <video class="video" src=""></video>
                    <view class="video-mark">
                        <image class="video-mark-img" src=""/>
                        <text>123</text>
                    </view>
                </view>
                <view class="item">
                    <video class="video" src=""></video>
                    <view class="video-mark">
                        <image class="video-mark-img" src=""/>
                        <text>123</text>
                    </view>
                </view>
                <view class="item">
                    <video class="video" src=""></video>
                    <view class="video-mark">
                        <image class="video-mark-img" src=""/>
                        <text>123</text>
                    </view>
                </view>
                <view class="item">
                    <video class="video" src=""></video>
                    <view class="video-mark">
                        <image class="video-mark-img" src=""/>
                        <text>123</text>
                    </view>
                </view>
            </scroll-view>
        </view>
        
    </view>
</template>

<style lang="scss" scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(255,205,39);
        overflow: hidden;
        .content{
            margin-top: 176rpx;
            border-radius: 32rpx 32rpx 0 0;
            background-color: #fff;
            padding: 40rpx 24rpx;
            height: calc(100% - 176rpx);
            .kong{
            width: 610rpx;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            .kong-img{
                width: 610rpx;
                height: 368rpx;
            }
            .kong-text{
                font-size: 24rpx;
                color: rgb(144,147,153);
            }
            }
            .item{
                position: relative;
                width: 344rpx;
                height: 612rpx;
                display: inline-block;
                margin: 0 14rpx 14rpx 0;
                &:nth-child(2n){
                    margin: 0;
                }
                .video{
                    width: 344rpx;
                    height: 612rpx; 
                    border-radius: 8rpx;
                }
                .video-mark{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 68rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: rgba(0,0,0,0.8);
                    padding: 0 16rpx;
                    font-size: 24rpx;
                    color: #fff;
                    .video-mark-img{
                        width: 48rpx;
                        height: 48rpx;

                    }
                }
            }
        }
      
    }
</style>